<template>
	<view class="asset-box">
		<view class="asset-head-box">
			<view class="asset-head-img">
				<view class="head-image">
					<u-image src="@/static/hjpImg/menuLogo.png" width="40px" height="40px"></u-image>
				</view>
				<view class="head-itext">HPG</view>
			</view>
			<view class="asset-head-info">
				<view>HPG&nbsp;{{$t('home.H51')}}</view>
				<view class="head-info-text">{{count}}<text class="info-unit">HPG</text></view>
			</view>
		</view>
		<view class="asset-content">
			<view class="asset-content-label">{{$t('home.H56')}}</view>
			<view class="asset-count-input">
				<u-input :placeholder="$t('home.H58')" border="none" v-model="countValue" clearable
				    :type="type" @change="changeCount"
				  ></u-input>
				  <view class="asset-count-all" @click="allFun">{{$t('home.H59')}}</view>
			</view>
			<view class="asset-content-label asset-content-mag">{{$t('home.H57')}}</view>
			<view class="asset-address-input">
				<view class="asset-address-text">{{usreaddress}}</view>
			</view>
		</view>
		<view class="asset-tip">
			<view class="tip-text">{{$t('home.H52')}}<text class="asset-text" @click="serviceFun"> {{$t('home.H53')}}</text></view>
			<view class="tip-text">{{$t('home.H54')}}</view>
		</view>
		<view class="asset-button" @click="withdrawalFun">{{$t('home.H55')}}</view>
		<u-overlay :show="showpledge" >
			<view class="overlayoadingicon">
				<u-loading-icon :text="$t('home.H49')" textColor="blue" textSize="14" color="blue"></u-loading-icon>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import {
		USDTController,
		USDT_contracts,
		contractsOBJ,
		controAdress
	} from '@/api/web3.js'
	import {number2string} from '@/api/help.js'
	export default {
		data() {
			return {
				count: '0',
				showpledge:false,
				assetAddress: '0x434***sj88s',
				countValue: 0,
				type: 'number',
				usreaddress:"",
			};
		},
		mounted() {
			this.usreaddress = uni.getStorageSync('account')|| '';
			if(this.usreaddress){
				this.userData();
			}
		},
		methods: {
			//8.查询用户信息
			async userData(){
				let res = await contractsOBJ.methods.selectUsersInfo(this.usreaddress).call();
				this.getuserData = res;
				let bune = parseInt(res[1])+parseInt(res[5])-res[2];
				this.count = (bune/1000000000000000000).toFixed(2);
				console.log(res,res);
				console.log(this.count,'this.count');
			},
			serviceFun() {
				// to do
			},
			async withdrawalFun() {
				
				// let time1 = await contractsOBJ.methods.wdStartTime().call();
				
				// let timeStamp = new Date().getTime();
				// let nub = timeStamp-(time1*1000);
				// console.log(nub,'nub');
				// if(nub<=0){
				// 	return uni.showToast({
				// 			title: this.$t('home.H73'),
				// 			icon: "none",
				// 			duration: 3000,
				// 		})
				// }
				if(this.countValue <= 0){
					return uni.showToast({
							title: this.$t('home.H71'),
							icon: "none",
							duration: 3000,
						})
				}
				try{
					this.showpledge = true;
					console.log(this.countValue,'countValue');
					let sunNBMer = number2string(this.countValue*1000000000000000000)
					let resjoinHs = await contractsOBJ.methods.wd(sunNBMer).send({from: this.usreaddress});
					if(resjoinHs){
						this.showpledge = false;
						uni.showToast({
							title: this.$t('home.H72'),
							icon: "success",
							duration: 3000,
						})
					}
					this.userData();
				}catch(e){
					//TODO handle the exception
					this.showpledge = false;
				}
			},
			changeCount() {
				// to do
			},
			allFun() {
				this.countValue = this.count;
			}
		}
	}
</script>

<style lang="scss" scoped>
@import '@/static/css/common.scss';
.asset-box {
	width: 100%;
	.asset-head-box {
		width: 343px;
		height: 40px;
		margin: 0 auto;
		margin-top: 34px;
		@include flex-space-between(space-between, center);
		.asset-head-img {
			@include size(81px, 40px);
			@include flex-space-between(null, center);
			.head-image {
				@include size(40px, 40px);
			}
			.head-itext{
				margin-left: 10px;
				height: 40px;
				font-size: 16px;
				color: #FFFFFF;
				line-height: 40px;
			}
		}
		.asset-head-info {
			text-align: right;
			font-size: 11px;
			color: #B9C1D9;
			.head-info-text{
				font-size: 18px;
				color: #26A17B;
				.info-unit {
					margin-left: 5px;
					font-size: 18px;
					color: #FFFFFF;
				}
			}
		}
	}
	.asset-content {
		width: 343px;
		height: 234px;
		margin: 0 auto;
		margin-top: 30px;
		margin-bottom: 20px;
		background: #161A33;
		border-radius: 10px;
		padding-top: 20px;
		.asset-content-label {
			margin: 0 0 16px 18px;
			height: 20px;
			@include font(14px, 400);
			color: #A7AFB7;
		}
		.asset-content-mag {
			margin: 24px 0 16px 18px;
		}
		.asset-count-input {
			width: 313px;
			height: 44px;
			margin: 0 auto;
			border-radius: 8px;
			border: 1px solid #252A4D;
			@include flex-space-between(space-between, center);
			::v-deep {
				.uni-input-placeholder {
					margin-left: 14px;
					@include font(14px, 400);
					color: #7A7A7A !important;
				}
				.uni-input-input {
					color: #FFFFFF !important;
					margin-left: 14px;
					@include font(14px, 400);
				}
			}
			.asset-count-all {
				margin: 0 14px;
				@include font(13px, 400);
				color: #8885FB;
				height: 44px;
				line-height: 44px;
			}
		}
		.asset-address-input {
			width: 313px;
			height: 44px;
			margin: 0 auto;
			margin-bottom: 30px;
			border-radius: 8px;
			border: 1px solid #252A4D;
			.asset-address-text {
				height: 44px;
				font-size: 12px;
				line-height: 44px;
				margin-left: 14px;
				color: #7A7A7A;
			}
		}
	}
	.asset-tip {
		width: 340px;
		height: 66px;
		margin: 0 auto;
		@include font(12px, 400);
		color: rgba(255,255,255,0.8);
		line-height: 18px;
		.tip-text {
			width: 100%;
			.asset-text {
				color: #10F4B1;
				margin-left: 5px;
				text-decoration: underline;
			}
		}
	}
	.asset-button {
		width: 343px;
		height: 54px;
		margin: 0 auto;
		margin-top: 30px;
		margin-bottom: 222px;
		background: #613AF1;
		border-radius: 8px;
		text-align: center;
		line-height: 54px;
		@include font(18px, 400);
		color: #FFFFFF;
	}
}
.overlayoadingicon{
	position: absolute;
	top: 50%;
	left: 50%;
	color: blue;
	transform: translate(-50%,-50%);
}
</style>
